<template>
  <div class="main" id="main">
    <!-- 顶部倒计时 -->
    <div class="timeBox">
      <div>
        <img src="@/assets/eliminateFun/clock.png" alt="" />
        <span class="gamedjs">倒计时:{{ this.duration }}s</span>
      </div>
      <div>
        <img src="@/assets/eliminateFun/score.png" alt="" />
        <span class="gamedjs">游戏得分:{{ this.counts }}分</span>
      </div>
    </div>
    <!-- 游戏 -->
    <div class="gameBox">
      <ul class="iceListDom" id="iceListDom">
        <template v-for="(item, index) in iceList">
          <li
            :style="{ ...item }"
            class="move"
            :data-index="index"
            @webkitAnimationEnd="removeDom"
            @click="iceClick($event)"
          ></li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
export default {
  name: "Xiaoxiaole",
  data() {
    return {
      gameConfig: {
        maxTime: 4, //最大掉落动画时常
        minTime: 2, //最小掉落动画时常
      }, //游戏配置
      iceList: [], //冰块列表
      timer: null, //定时添加冰块
      djstimer: null, //倒计时
      duration: 10, // 游戏时常
      counts: 0, //分数
      targetDOM: "", //添加气泡的DOM
      QPurl: require("@/assets/eliminateFun/qipao.png"), //+1气泡图片
    };
  },
  created() {},
  mounted() {
    this.targetDOM = document.getElementById("main");
    this.startGame();
  },
  destroyed() {
    window.clearInterval(this.timer);
    window.clearInterval(this.djstimer);
  },
  methods: {
    //开始游戏
    startGame() {
      this.timer = setInterval(() => {
        this.addIce();
      }, 200);
      this.gameDjs();
    },
    //生成掉落冰块
    addIce() {
      let clientWidth =
        document.documentElement.clientWidth || document.body.clientWidth; //获取屏幕宽度
      let left = parseInt(Math.random() * (clientWidth - 50) + 0); //随机left值
      let rotate = parseInt(Math.random() * (45 - -45) - 45) + "deg"; // 随机旋转角度
      let scales = 1; //缩放比例
      let durTime =
        Math.random() * (this.gameConfig.maxTime - this.minTime + 1) +
        this.gameConfig.minTime +
        "s"; //掉落动画时常
      this.iceList.push({
        left: left + "px",
        animationDuration: durTime,
      });
    },
    //游戏倒计时
    gameDjs() {
      this.djstimer = setInterval(() => {
        if (this.duration <= 0) {
          this.gameEnd();
          window.clearInterval(this.djstimer);
          return;
        } else {
          this.duration--;
        }
      }, 1000);
    },
    //游戏重置
    gameRest() {
      this.iceList = [];
      this.timer = null;
      this.duration = 23;
      this.counts = 0;
    },
    //冰块点击
    iceClick(e) {
      //移除斌冰块
      this.removeDom(e);
      //生成+1气泡
      this.addQp(e);
      //增加分数
      this.counts++;
    },
    //动画结束-删除冰块
    removeDom(e) {
      let target = e.currentTarget;
      document.querySelector("#iceListDom").removeChild(target);
    },
    //+1气泡
    addQp(e) {
      const { clientX, clientY } = e;
      const Img = document.createElement("img");
      Img.src = this.QPurl;
      Img.style.left = clientX - 20 + "px";
      Img.style.top = clientY + 20 + "px";
      Img.classList.add("qipao");
      this.targetDOM.appendChild(Img);
      setTimeout(() => {
        this.targetDOM.removeChild(Img);
      }, 500);
    },
    //游戏结束
    gameEnd() {
      window.clearInterval(this.timer);
      Dialog.confirm({
        title: "游戏结束",
        message: "再来一次",
      })
        .then(() => {
          this.again();
        })
        .catch(() => {});
    },
    //再来一次
    again() {
      this.gameRest();
      this.startGame();
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;
  background-color: green;
  position: relative;
  .timeBox {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    div {
      display: flex;
      align-items: center;
      img {
        width: 20px;
        height: 18px;
      }
      span {
        font-size: 14px;
        color: #00acff;
        margin-left: 4px;
      }
    }
  }
  .gameBox {
    width: 100vw;
    height: 100vh;
    .iceListDom {
      display: block;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
      li {
        position: absolute;
        animation: all 3s linear;
        top: -100px;
        z-index: 10;
        width: 48px;
        height: 69px;
        display: block;
        background: url("../../assets/eliminateFun/ice.png") no-repeat top
          center;
        background-size: 69px 62px;
        &.move {
          animation-name: aim_move;
          animation-iteration-count: 1;
          animation-timing-function: ease-in;
        }
      }
    }

    @keyframes aim_move {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(120vh);
        transform: translateY(120vh);
      }
    }
  }
  .van-overlay {
    z-index: 99;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    &.djswrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      box-sizing: border-box;
      padding-top: 50px;
      .djs {
        width: 288.5px;
        height: 219px;
      }
      .info {
        width: 127px;
        height: 42px;
      }
    }
    &.modalShowWrapper {
      .modalBox {
        width: 288px;
        background: url("../../assets/eliminateFun/modalBg.png") no-repeat
          bottom center;
        background-size: 288px 302px;
        border-radius: 10px;
      }
    }
  }
  .shareFriend {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 10px;
    .shareImg {
      width: 306.5px;
      height: 176px;
    }
  }
}
</style>
<style>
.qipao {
  position: absolute;
  z-index: 99;
  width: 26px;
  height: 26px;
}
</style>
